<template>
  <el-card>
    <div slot="header">
      <span>{{ title }}</span>
    </div>
    <el-row type="flex" justify="center">
      <el-col :span="14">
        <el-form
          class="table_form_wrap"
          ref="recordForm"
          :model="recordForm"
          :rules="formValidate"
          label-width="140px"
        >
          <el-form-item label="开票供应商代码" prop="invoiceSupplierCode">
            <el-input
              readonly
              v-model.trim="recordForm.invoiceSupplierCode"
              placeholder="请选择开票供应商代码"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="showSupplierDialog"
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="开票供应商名称" prop="invoiceSupplierNameOld">
            <el-input
              disabled
              v-model.trim="recordForm.invoiceSupplierNameOld"
              :placeholder="supplierPlaceholder"
            />
          </el-form-item>
          <el-form-item label="修改后供应商名称" prop="invoiceSupplierNameNew">
            <el-input
              v-model.trim="recordForm.invoiceSupplierNameNew"
              :placeholder="supplierPlaceholder"
              @blur="formatNewName"
            />
          </el-form-item>
          <el-form-item label="修改原因" prop="reason">
            <el-input
              type="textarea"
              v-model.trim="recordForm.reason"
              placeholder="请输入修改原因"
              show-word-limit
              :minlength="3"
              :maxlength="200"
            />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-row>
    <SelectSupplierDialog
      :supplierVisible.sync="dialogVisible"
      @handle-select="handleGetSupplierInfo"
    />
  </el-card>
</template>
<script>
import SelectSupplierDialog from './components/SelectSupplierDialog.vue'
import {
  editInvoicingSupplieNameService,
} from '@api/supplier/management/invoicingSupplier';
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';
import { enToZhForContent } from '@/pages/supplier/utils';

export default {
  components: {
    SelectSupplierDialog
  },
  data () {
    return {
      id: null,
      submitLoading: false,
      dialogVisible: false,
      supplierPlaceholder: '根据供应商代码搜索出结果后，自动写入，不可修改',
      recordForm: {
        invoiceSupplierId: '', // 供应商ID
        invoiceSupplierCode: '', // 供应商代码
        invoiceSupplierNameOld: '', // 供应商代码
        invoiceSupplierNameNew: '', // 供应商名称
        reason: '', // 修改原因
      },
      formValidate: {
        invoiceSupplierCode: [
          { required: true, message: '开票供应商代码不能为空', trigger: 'change' }
        ],
        invoiceSupplierNameOld: [
          { required: true, message: '开票供应商名称不能为空', trigger: 'change' }
        ],
        invoiceSupplierNameNew: [
          { required: true, message: '修改后名称不能为空', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '修改原因不能为空', trigger: 'blur' }
        ]
      },
    }
  },
  computed: {
    title () {
      return '修改开票供应商名称';
    }
  },
  methods: {
    formatNewName () {
      this.$set(this.recordForm, 'invoiceSupplierNameNew', enToZhForContent(this.recordForm.invoiceSupplierNameNew));
    },
    // 显示供应商弹框
    showSupplierDialog () {
      this.dialogVisible = true;
    },
    // 关闭弹框
    handleColseSupplierDialog () {
      this.dialogVisible = false;
    },
    // 提交
    handleSubmit () {
      this.$refs['recordForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          editInvoicingSupplieNameService(this.recordForm).then((res) => {
            this.submitLoading = false;
            if (isResponseSuccess(res)) {
              this.$message.success(res.message);
              this.handleCancel()
            }
          }).catch(() => {
            this.submitLoading = false;
          })
        }
      })
    },
    // 获取供应商信息
    handleGetSupplierInfo (row) {
      const {
        invoiceSupplierCode, // 供应商编码
        invoiceSupplierName, // 供应商名称
        invoiceSupplierId, // 供应商id
      } = row;
      this.recordForm = {
        ...this.recordForm,
        invoiceSupplierCode,
        invoiceSupplierNameOld: invoiceSupplierName,
        invoiceSupplierId,
      }
    },
    // 取消
    handleCancel () {
      this.$router.go(-1);
    },
  }
};
</script>
